<template>
  <div>
    <el-card style="margin:20px">
      <!-- 搜索栏 -->
      <el-row :inline="true" type="flex">
        <!-- 表单 -->
        <el-form :inline="true" :model="formData" :label-position="labelPosition">
          <el-form-item label="上架编号">
            <el-input v-model="formData.code" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="入库单号">
            <el-input v-model="formData.receiptCode" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="货主名称">
            <el-input v-model="formData.ownerName" placeholder="请输入" />
          </el-form-item>
          <el-form-item style="margin-top:50px ; margin-left:200px">
            <el-button class="search" round @click="searchBtn">搜索</el-button>
          </el-form-item>
          <el-form-item style="margin-top:50px">
            <el-button round style="color:black" class="reset" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <el-card style="margin:20px">

      <!-- 表单 -->
      <template>
        <el-table :data="tableData" border style="width: 70vw; margin:20px">
          <el-table-column
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="code"
            label="上架任务编号"
            width="120"
          />
          <el-table-column
            prop="receiptCode"
            label="入库单号"
            width="120"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="120"
          />
          <el-table-column
            prop="ownerName"
            label="货主名称"
            width="120"
          />
          <el-table-column
            prop="warehouseName"
            label="仓库名称"
            width="120"
          />仓库名称
          <el-table-column
            prop="zip"
            label="库区名称"
            width="120"
          />
          <el-table-column
            prop="personName"
            label="负责人"
            width="120"
          />
          <el-table-column
            prop="status"
            label="上架状态"
            width="120"
          />
          <el-table-column
            prop="planNum"
            label="货品数量"
            width="120"
          />
          <el-table-column
            prop="realNum"
            label="实收总数"
            width="120"
          />
          <el-table-column
            prop="groundingNum"
            label="上架数量"
            width="120"
          />
          <el-table-column
            prop="differenceNum"
            label="差异总数"
            width="120"
          />
          <el-table-column
            prop="completionTime"
            label="收货完成时间"
            width="120"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template>
              <el-button type="text" size="small">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="+putwayInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getPutaway } from '@/api/stork'
export default {
  data() {
    return {
      labelPosition: 'top',
      formData: {
        code: '', // 上架编号
        receiptCode: '', // 入库单号
        ownerName: '' // 货主名称
      },
      tableData: [],
      putwayInfo: {
        code: '',
        receptCode: '',
        ownerName: '',
        current: 1,
        size: 3
      },
      total: 0
    }
  },
  created() {
    this.loadpage()
  },
  methods: {
    // 获取上架任务单
    async loadpage() {
      const res = await getPutaway(this.putwayInfo)
      console.log(res)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
    },
    // 搜索
    async searchBtn() {
      const res = await getPutaway(this.formData)
      this.tableData = res.data.data.records
    },
    // 重置
    resetBtn() {
      this.formData = {
        code: '', // 上架编号
        receiptCode: '', // 入库单号
        ownerName: '' // 货主名称
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.cell {
 .el-button--text {
  color: $table-operate;
 }
}

.search{
  background-color: $btn-search
}
.reset{
  background-color: $btn-reset
}

</style>
